import "@wangeditor/editor/dist/css/style.css";
import { createEditor, createToolbar } from "@wangeditor/editor";
//这里baseURL引入JS的位置
import { baseURL } from "@/axios/axios-http";

class Editor {
    //成员变量声明
    content = [];//富文本编辑器输入的内容
    editorConfig = null;//富文本编辑器的配置
    toolbar = null;//富文本编辑器的工具栏
    editor = null;//富文本编辑器的编辑区域

    //当new Editor()时，该函数会被自动调用
    init() {
        //富文本编辑器初始化
        this.initEditorConfig();
        this.initEditor();
        this.initToolBar();
    }

    //该函数用于初始化富文本（包含工具栏、编辑区、编辑内容）
    initAll(strContent) {
        this.content = strContent;
        this.initEditorConfig();
        this.initEditor();
        this.initToolBar();
    }

    //该函数用于初始化富文本，但是不初始化工具栏
    initContent(strContent,disable){
        //传入笔记内容，直接赋值到该类的content成员变量上
        this.content = strContent;
        //给富文本编辑器初始化
        this.initEditorConfig();
        this.initEditor();
        //给富文本编辑器一个初始值，转换JSON对象
        //编辑内容是否显示光标
        if(disable){
            //禁用富文本区域的编辑功能
            this.editor.disable();
        }
    }

    //初始化编辑器配置
    initEditorConfig() {
        //this绑定默认是当前类对象，为了防止this绑定丢失，给this重新赋值了
        var that  = this
        that.editorConfig = {
            placeholder: "请输入笔记内容",
            scroll: false, // 禁止编辑器滚动
            onChange(editor) {//每当编辑区域的内容变化时，该函数都会执行
                //是文章JSON数组格式的文本
                that.content = editor.children;
            },
            //工具栏配置
            MENU_CONF: {
                //配置上传图片
                uploadImage: {
                    server: baseURL + "/api/upload",
                    fieldName: "file",
                    //该函数会在图片上传完成后触发，
                    customInsert(response, insertFn) {
                        if (response.code == 200) {
                            //图片插入函数
                            insertFn(response.data, "", "");
                        } else {
                            alert("图片上传失败");
                        }
                    },
                },
            },
        };
    }

    //创建文本编辑区editor
    initEditor() {
        //该变量用于初始化富文本的初始内容
        let editorContent = [];
        //判断content（数组）变量是否为空
        if(this.content.length != 0){
            //字符串转换为JSON对象
            editorContent = JSON.parse(this.content)
        }
        
        this.editor = createEditor({
            selector: "#editor-container",//把id=editor-container的HTML元素作为编辑区域展示
            content: editorContent,//编辑区域的默认内容
            config: this.editorConfig,//传入编辑区的配置
        });
    }

    // 工具栏
    initToolBar() {
        this.toolbar = createToolbar({
            selector: "#editor-toolbar",//把id=editor-toolbar的HTML元素作为工具栏展示
            editor:this.editor,//需要传入编辑器变量
            config: {//排除全屏按钮
                excludeKeys: "fullScreen",
            },
        });
    }

    //从富文本内容中读取笔记的简介部分：默认把内容的第一段作为简介
    getNewsIntro(){
        return this.content[0].children[0].text;
    }

    //从富文本内容中读取笔记内容：全部内容都认为是笔记内容
    getNewsContent(){
        //把JSON对象转换成字符串
        return JSON.stringify(this.content);
    }

}


export default Editor;